<template>
  <div class="home">
    <el-container>
      <el-header>
        <head-tab />
      </el-header>
      <el-container>
        <el-aside width="200px">
          <el-menu background-color="#545c64"
                   text-color="#fff"
                   active-text-color="#ffd04b"
                   :default-active="activeName"
                   @select="handleSelect">
            <el-menu-item index="1">
              <i class="el-icon-menu"></i>
              <span slot="title">{{handleMenuName}}</span>
            </el-menu-item>
            <el-submenu index="3"
                        v-if="isCommon">
              <template slot="title">
                <i class="el-icon-setting"></i>
                <span>系统管理</span>
              </template>
              <el-menu-item index="3-1"
                            v-permission="['admin']">
                <i class="el-icon-coordinate"></i>
                <span slot="title">角色管理</span>
              </el-menu-item>
              <el-menu-item index="3-2"
                            v-permission="['admin','chnl_manager']">
                <i class="el-icon-user"></i>
                <span slot="title">用户管理</span>
              </el-menu-item>
            </el-submenu>
          </el-menu>
        </el-aside>
        <el-main>
          <task-mng v-if="activeName === '1'"
                    :active-name="activeName" />
          <role-mng v-if="activeName === '3-1'"
                    :active-name="activeName" />
          <user-mng v-if="activeName === '3-2'"
                    :active-name="activeName"></user-mng>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import HeadTab from './components/headTab.vue'
import RoleMng from './components/roleMng.vue'
import TaskMng from './components/taskMng.vue'
import UserMng from './components/userMng.vue'

export default {
  name: 'Home',
  components: {
    HeadTab,
    TaskMng,
    RoleMng,
    UserMng
  },
  data() {
    return {
      activeName: this.$route.query.activeName || '1'
    }
  },
  computed: {
    handleMenuName() {
      return '任务管理'
    },
    isCommon() {
      const role = window.sessionStorage.getItem('role')
      if (role === 'handler') {
        return false
      } else {
        return true
      }
    },
  },
  created() {
  },
  methods: {
    handleSelect(index) {
      this.activeName = index
    }
  },
}
</script>
<style lang="scss" scoped>
.el-header {
  padding: 0;
}
.el-aside,
.el-main {
  margin-top: 20px;
  padding: 0;
  min-height: 1000px;
  .el-menu {
    min-height: 1000px;
  }
}
</style>
